<template>
  <div>
    <h3
      v-if="imgUrl"
      style="
        padding: 0px 15px;
        text-align: center;
        margin: 0;
        margin-top: 20px;
        margin-bottom: 20px;
      "
    >
      请长按图片保存
    </h3>
    <h3
      v-else
      style="padding: 0px 15px; text-align: center; margin: 0; margin-top: 20px"
    >
      图片正在制作中，请稍后....
    </h3>
    <div style="margin-top: 20px">
      <div class="result">
        <div class="content" id="mycanvas">
          <div class="nei">
            <div class="logo" style="text-align: center; padding-top: 32px">
              <img
                src="./logo.png"
                alt=""
                style="width: 44px; height: 44px; border-radius: 50%"
              />
            </div>
            <div class="first_line">爱脑行动</div>
            <div class="secend_line">邀请您参与脑健康认知筛查</div>
          </div>
          <div style="padding: 0 66px">
            <div class="line">来自{{ nickName }}的爱心传递码</div>
          </div>
          <div class="qrcode">
            <img
              :src="promotionCodeImg"
              alt=""
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="bottom_text">扫码参与脑健康认知筛查</div>
        </div>
      </div>
    </div>
    <div style="padding: 20px 20px">
      <img
        v-if="imgUrl"
        :src="imgUrl"
        alt=""
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  props: {
    nickName: {
      type: String,
      default: "",
    },
    promotionCodeImg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      imgUrl: "",
    };
  },
  methods: {
    handleGenerate() {
      const dom = document.querySelector("#mycanvas");
      html2canvas(dom, {
        useCORS: true,
      }).then((canvas) => {
        this.imgUrl = canvas.toDataURL();
        // document.querySelector("#append").appendChild(canvas);
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.handleGenerate();
    });
  },
};
</script>

<style lang="scss" scoped>
.result {
  background: #ffffff;
  width: 375px;
  position: fixed;
  padding-bottom: 20px;
  top: 1000px;
  left: 1000px;

  .content {
    width: 315px;
    // height: 435px;
    background: url("./nei.png") 100% no-repeat;
    background-position: bottom left;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 4px 5px 15px 0px rgba(31, 90, 102, 0.1);
    margin: 0 auto;
    margin-top: 90px;
    margin-bottom: 20px;
    .nei {
      height: 188px;
      background: url("./wai.png") 50% no-repeat;
      background-position: top left;
      .first_line {
        height: 34px;
        font-size: 28px;
        font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
        font-weight: normal;
        color: #007e61;
        line-height: 34px;
        text-align: center;
        margin-top: 10px;
        font-weight: 550;
      }
      .secend_line {
        height: 30px;
        font-size: 20px;
        font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
        font-weight: normal;
        color: #00cc6a;
        line-height: 30px;
        font-weight: 550;
        text-align: center;
        margin-top: 10px;
      }
    }

    .line {
      // width: 182px;
      height: 30px;
      background: #e8efee;
      border-radius: 15px;
      // opacity: 0.2;
      margin: auto;
      font-size: 14px;
      font-weight: 500;
      color: #1c5b64;
      line-height: 30px;
      text-align: center;
      // font-weight: 550;
    }
    .qrcode {
      width: 215px;
      height: 215px;
      margin: auto;
      margin-top: 35px;
    }
    .bottom_text {
      width: 154px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: #004751;
      line-height: 20px;
      margin: auto;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
}
</style>
